<template>
  <div class="car-total-info">

    <div class="car-total-info-item car-total-info-item-header">
      <Superscript title="车辆运营数据"></Superscript>

      <div class="car-total-info-item-header-top">
        <div class="car-total-info-item-inner-item" v-for="(item, index) in operateData[0]" :key="index">
          <img :src="operateDes[0][index].src" class="car-total-info-item-icon" :alt="operateDes[0][index].src">
          <div class="car-total-info-item-content">
            <count :id="`top_${index}`" size="big" :endVal="item"></count>
            <div class="car-total-info-item-content-text">{{operateDes[0][index].text}}</div>
          </div>
        </div>
      </div>

      <div class="car-total-info-item-header-middle">
        <Per id="running-rate" type="normal" content="工作车率" width="40%" height="90%" :val="operateData[1][0]"></Per>
        <Per id="complete-rate" type="danger" content="里程完成率" width="40%" height="90%"  :val="operateData[1][1]"></Per>
      </div>

      <div class="car-total-info-item-header-bottom">
        <div class="car-total-info-item-inner-item" v-for="(item, index) in operateData[2]" :key="index">
          <img :src="operateDes[1][index].src" class="car-total-info-item-icon" :alt="operateDes[1][index].src">
          <div class="car-total-info-item-content">
            <count :id="`bottom_${index}`" size="big" :endVal="item" :decimals="index === 1 ? 0 : 2"></count>
            <div class="car-total-info-item-content-text">{{operateDes[1][index].text}}</div>
          </div>
        </div>
      </div>

    </div>

    <div class="car-total-info-item car-total-info-footer">
      <Superscript title="互联网用户数据"></Superscript>
      <div class="car-total-info-footer-box">
        <div class="car-total-info-footer-item">
          <div class="car-total-info-footer-item-icon">
            <img src="http://xm-cdn.oss-cn-hangzhou.aliyuncs.com/img/data-screen/polygon-bg.png" alt="">
            <span >{{networkData[0].title}}</span>
          </div>
          <div class="car-total-info-footer-item-content">
            <div class="car-total-info-footer-item-pay">
              <count :id="`app-pay-user-0`" :endVal="networkData[0].payAmount"></count>
              <div class="car-total-info-footer-item-pay-text">支付笔数</div>
            </div>
            <div class="car-total-info-footer-item-active">
              <count :id="`app-active-user-0`" type="green" :endVal="networkData[0].activeAmount"></count>
              <div class="car-total-info-footer-item-active-text">今日活跃</div>
            </div>
            <div class="car-total-info-footer-item-download">
              <count :id="`app-download-count-0`" type="white" :endVal="networkData[0].downloadAmount"></count>
              <div class="car-total-info-footer-item-download-text">总下载量</div>
            </div>
          </div>
        </div>

        <div class="car-total-info-footer-item">
          <div class="car-total-info-footer-item-icon">
            <img src="http://xm-cdn.oss-cn-hangzhou.aliyuncs.com/img/data-screen/polygon-bg.png" alt="">
            <span >{{networkData[1].title}}</span>
          </div>
          <div class="car-total-info-footer-item-content">
            <div class="car-total-info-footer-item-pay">
              <count :id="`app-pay-user-1`" :endVal="networkData[1].payAmount"></count>
              <div class="car-total-info-footer-item-pay-text">支付笔数</div>
            </div>
            <div class="car-total-info-footer-item-active">
              <count :id="`app-active-user-1`" type="green" :endVal="networkData[1].activeAmount"></count>
              <div class="car-total-info-footer-item-active-text">今日活跃</div>
            </div>
            <div class="car-total-info-footer-item-download">
              <count :id="`app-download-count-1`" type="white" :endVal="networkData[1].downloadAmount"></count>
              <div class="car-total-info-footer-item-download-text">总领卡量</div>
            </div>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
  import { mapActions, mapState} from 'vuex'
  import { Superscript, count, Per } from '../../../components'

  export default {
    components: { Superscript, count, Per },
    data () {
      return {
        operateDes: [
          [
            { src: 'http://xm-cdn.oss-cn-hangzhou.aliyuncs.com/img/data-screen/running-bus-count.png', text: '营运车数' },
            { src: 'http://xm-cdn.oss-cn-hangzhou.aliyuncs.com/img/data-screen/one-day-bus-count.png', text: '当日营运车数' },
            { src: 'http://xm-cdn.oss-cn-hangzhou.aliyuncs.com/img/data-screen/station-count.png', text: '公交站点总数' },
            { src: 'http://xm-cdn.oss-cn-hangzhou.aliyuncs.com/img/data-screen/line-count.png', text: '线路总数' }
          ],
          [
            { src: 'http://xm-cdn.oss-cn-hangzhou.aliyuncs.com/img/data-screen/line-length.png', text: '总线长(km)' },
            { src: 'http://xm-cdn.oss-cn-hangzhou.aliyuncs.com/img/data-screen/running-count.png', text: '发车趟次' },
            { src: 'http://xm-cdn.oss-cn-hangzhou.aliyuncs.com/img/data-screen/average-length.png', text: '平均线长(km)' },
            { src: 'http://xm-cdn.oss-cn-hangzhou.aliyuncs.com/img/data-screen/average-speed.png', text: '平均车速(km/h)' }
          ]
        ]
      }
    },
    mounted () {
//      this.getOperate()
//      this.getNetwork()
    },
    computed: {
      ...mapState(['operateData', 'networkData'])
    },
    methods: {
//      ...mapActions(['getOperate', 'getNetwork'])
    }
  }
</script>

<style lang="stylus" scoped>
  @import 'index.styl';
</style>
